<template>
  <!-- 此组件只用于财务审核信息展示 -->
  <div class="tableCard">
    <div class="box" :style="{border:!borderRed ? '1px solid #f5ebec' : '1px solid #409EFF'}">
      <div class="header">
        <div class="item checkboxArea">
          <div class="checkbox">
            <el-checkbox :disabled="!checkAble" v-model="checked1" @change="changeCheckbox"></el-checkbox>
          </div>
          {{ form.area_company }}
        </div>
        <div class="item">运单ID: {{ form.add_id + '-' + form.yund_id }}</div>
        <div class="item">
          审核状态:
          <span v-if="form.xiugai == 0" style="color:red">未审核</span>
          <span v-else-if="form.xiugai == 1" style="color:green">已审核</span>
        </div>
        <div class="item">
          支付状态:
          <span v-if="form.status == 0" style="color:red">未支付</span>
          <span v-else-if="form.status == 1" style="color:green">已支付</span>
          <span v-else-if="form.status == 2" style="color:blue">二次支付</span>
        </div>

        <div class="item">
          钉钉状态:
          <span v-if="form.batch_number_ding == '0'" style="color:red">未发起</span>
          <span v-if="form.batch_number_ding != '0'" style="color:green">已发起</span>
        </div>
        <div class="item" style="width:28.5%">推送时间: {{ form.add_time }}</div>
        <!-- <div class="item"></div> -->
      </div>
      <div class="main">
        <div class="item">
          <!-- <StatusTag :status="2" :isError="true" :yund_id="123456" /> -->
          <StatusTag :status="form.advance_payment_status" :yund_id="form.yund_id" />
          <StatusTag
            v-if="form.is_lock == 1"
            :isError="true"
            :status="5"
            :lockReason="form.reason"
            :yund_id="form.yund_id"
          />

          <p>{{ $maskString(form.sjxm) }}</p>
          <p>{{ form.cph}}</p>
          <p>{{ $maskString(form.mobile) }}</p>
        </div>
        <div class="item">
          <p>{{ form.company_name }}</p>
          <p>{{ form.goods}}</p>
        </div>
        <div class="item special" :style="{paddingLeft:'10px'}">
          <p style="color: #409EFF;">发货重量: {{form.kg}}吨</p>
          <p style="color: #F56C6C;">卸货重量: {{form.shkg}}吨</p>
          <p class="overtext" :title="form.ship_address" style="color: #409EFF;">发货地址: {{ form.ship_address }}</p>
          <p class="overtext" :title="form.to_address" style="color: #F56C6C;">卸货地址: {{ form.to_address }}</p>
          <!-- <p class="checkTrace btn">查看轨迹</p> -->
        </div>
        <div class="item">
          <p v-if="form.th_time" style="color: #409EFF;">发货时间: {{ form.th_time }}</p>
          <p v-if="form.dd_time" style="color: #F56C6C;">卸货时间: {{ form.dd_time }}</p>
          <!-- <p v-if="form.th_time" style="color: #E6A23C;">推送时间: {{ form.add_time }}</p> -->
          <p v-if="form.approve_time" style="color: #3A71A8;">审核时间: {{ form.approve_time }}</p>
          <p v-if="form.pay_time" style="color: #67C23A;">支付时间: {{ form.pay_time }}</p>
        </div>
        <div class="item special" :style="{paddingLeft:'60px'}">
          <p>运费单价: {{ form.yfdj }}</p>
          <p style="color: #F56C6C;">实结金额: {{ form.zyf }}</p>
          <p style="color: #E6A23C;">含税金额: {{ form.money_bill }}</p>
          <p>油气金额: {{ form.oil_money }}</p>
        </div>
        <div class="item" style="width: 10%;">
          <p style="color: #409EFF;" class="btn" @click="checkImg('fhd')">发货单</p>
          <p style="color: #F56C6C;" class="btn" @click="checkImg('shd')">收货单</p>
          <p
            class="btn"
            @click="$emit('contractHandler',{ user_id: form.user_id, htsn: form.HTsn, yund_id: form.id })"
          >电子合同</p>
          <el-image
            ref="shd"
            style="width: 0px; height: 0px"
            :src="form.shd"
            :preview-src-list="[form.shd]"
          ></el-image>
          <el-image
            ref="fhd"
            style="width: 0px; height: 0px"
            :src="form.fhd"
            :preview-src-list="[form.fhd]"
          ></el-image>
        </div>
        <div class="item btnarea" style="width:18.5%">
          <div class="col">
            <p class="btnp">
              <el-button size="mini" type="primary" @click="$emit('showPaymentBillDetail',form)">
                {{ form.xiugai == 1 && form.status == 1
                ? '查看运单' : '审核运单' }}
              </el-button>
            </p>
            <p class="btnp" v-if="form.status == 0">
              <el-button
                size="mini"
                type="primary"
                @click="$emit('lockBill',form)"
              >{{ form.is_lock == 1 ? '解锁运单' : '锁定运单' }}</el-button>
            </p>
            <p class="btnp">
              <el-button size="mini" type="primary" @click="$emit('upWaybill',form)">上传运单</el-button>
            </p>
            <!-- <p class="btnp">
              <el-button
                size="mini"
                type="primary"
                @click="$emit('syncPayInfo',form.yund_id)"
              >上传流水</el-button>
            </p> -->
     
          </div>
          <div class="col">
            <p class="btnp">
              <el-button size="mini" type="primary" @click="$emit('checkBillStatus',form)">运单日志</el-button>
            </p>
            <p class="btnp" v-if="form.xiugai == 1 && form.status == 1">
              <el-button size="mini" type="primary" @click="$emit('addNote',form)">添加备注</el-button>
            </p>
            <p class="btnp" v-if="form.xiugai == 1 && form.status == 1">
              <el-button size="mini" type="primary" @click="$emit('changeBillMoney',form)">含税金额</el-button>
            </p>
            <p class="btnp" v-if="form.xiugai == 1 && form.status == 1">
              <el-button size="mini" type="primary" @click="$emit('changeShipMoney',form)">运费增减</el-button>
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
  
  <script>
export default {
  name: "tableCard",
  props: {
    form: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      name: "tableCard",
      borderRed: false,
      checked1: false,
      checkAble: true,
      // form: {},
      fhd: "http://img.zhgylgl.com/115150610701753839403.jpg-small.jpg",
      shd: "http://img.zhgylgl.com/115150610961753839415.jpg-small.jpg"
    };
  },
  mounted() {
    // this.initial();
    this.checkAble = this.selectableStatus(this.form);
  },
  watch: {
    checked1(val) {
      this.borderRed = val;
    }
  },
  methods: {
    //钉钉批次号为0的时候可选
    selectableStatus(row) {
      if (row.batch_number_ding == "0") {
        //已审核 未支付 未锁定的才可进行选中
        if (row.xiugai == 1 && row.status == 0 && row.is_lock == 0) {
          return true;
        } else {
          return false;
        }
      } else {
        return false;
      }
    },
    async initial() {},
    checkImg(name) {
      // console.log('name',name,this.$refs[name]);
      this.$refs[name].$el.querySelector("img").click();
      // this.$refs[name].click();
    },
    changeCheckbox(val) {
      this.$emit("selectChange", this.form, val);
    }
  }
};
</script>
  
  <style lang="scss" scoped>
.tableCard {
  padding: 5px 0;
  background: #fff;
  //   font-weight: bold;
  .box {
    border-radius: 5px;
    width: 100%;
    // height: 500px;
    border: 1px solid #f5ebec;
    font-size: 14px;
    .header {
      display: flex;
      // justify-content: space-around;
      .item {
        // height: 25px;
        // flex: 1;
        width: 14.25%;
        text-align: center;
        box-sizing: border-box;
        // font-weight: bold;
        padding: 5px;
        border: 1px solid #ebeef5;
        border-top: none;
        border-right: none;
      }
      .checkboxArea {
        display: flex;

        .checkbox {
          width: 40%;
          text-align: left;
        }
      }
    }
    .main {
      display: flex;
      // justify-content: space-around;
      .overtext{
        max-width: 200px;
        white-space: nowrap; /* 文本不会换行 */
        overflow: hidden; /* 溢出内容隐藏 */
        text-overflow: ellipsis; /* 溢出文本显示为省略号 */
      }
      .item {
        box-sizing: border-box;
        min-height: 120px;
        // height: 25px;
        // flex: 1;
        width: 14.25%;
        text-align: center;
        // font-weight: bold;
        padding: 5px;
        border: 1px solid #ebeef5;
        border-top: none;
        border-left: none;
        border-bottom: none;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        &:last-child {
          border-right: none;
        }
        .btnp {
          margin-bottom: 5px;
        }
        .btn {
          text-decoration: underline;
          cursor: pointer;
        }
      }
      .btnarea{
        flex-direction: row;
        justify-content: center;
        align-items: start;
        
        .col{
          margin-top: 8px;
          margin-right: 10px;
        }
      }
      .special {
        align-items: start;
        // padding-left: 20px;
      }
    }
  }
}
</style>
  